<template>
    <div>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
        >
            <el-menu-item index="0">
                <img
                    style="width: 100px"
                    src="../images/huli.png"
                    alt="Element logo"
                />
            </el-menu-item>
            <el-menu-item index="1"><router-link to="/">首页</router-link></el-menu-item>
            <el-menu-item index="2" @click="checkLoginAndGoToCart">购物车</el-menu-item>
            <el-menu-item index="3" @click="checkLoginAndGoToOrder">订单</el-menu-item>
            <el-menu-item index="4"><router-link to="/About">关于</router-link></el-menu-item>
            <div class="flex-grow"/>
            <el-menu-item index="5">{{name}},欢迎你！</el-menu-item>
            <el-menu-item index="6" v-if="name=='游客'"><router-link to="/login">登录/</router-link><router-link to="/Register">注册</router-link></el-menu-item>
       
            <el-menu-item index="7" v-else @click="goback()">退出</el-menu-item>
           
        </el-menu>
    </div>
</template>
<script>
export default{
    data(){
        return{
            name:'游客'
        }
    },
    mounted(){
        if(sessionStorage.getItem('username') == null){
            this.name = '游客'
        }else{
            this.name =sessionStorage.getItem('username')
        }
    },
    methods:{
        goback(){
            this.name ='游客',
            sessionStorage.setItem('username',null)
        },
        checkLoginAndGoToCart () {
            if (this.name === '游客') {
                // 使用Element UI的MessageBox组件来弹出提示框（这里假设项目中已引入Element UI），你也可以使用原生的alert等简单提示方式
                this.$alert('您还未登录，请先登录后再访问购物车', '提示', {
                    confirmButtonText: '确定'
                    
                },
           
            );
            this.$router.push('/login');
            } else {
                // 如果已登录，这里可以添加跳转到购物车页面具体逻辑，当前代码示例中已有<router-link to="/cart">的跳转配置，也可以在这里通过编程式导航等方式跳转
                this.$router.push('/cart');
            }
        },
        checkLoginAndGoToOrder() {
            if (this.name == '游客') {
                sessionStorage.setItem('redirect', '/order');
                this.$alert('您还未登录，请先登录后再访问订单页面', '提示', {
                    confirmButtonText: '确定'
                });
                this.$router.push('/login');
            } else {
                this.$router.push('/order');
            }
        },


    },

      
}
</script>
<style>
a:-webkit-any-link {
    text-decoration:none;
}
.flex-grow{
    flex-grow: 1;
}
</style>